<div class="find-app" id="app">
    <!-- public-head -->
    <div class="header-mobile">
        <a class="nav-back" href="javascript:history.go(-1)">
            <img class="icon" src="__CDN__/assets/img/return@2x.png" alt="">
        </a>
        <h1 class="nav-title">认证</h1>
    </div>
    <!-- main-wrapper -->
    <div class="main-wrapper">
        <div class="auth-wrapper">
            <div class="section-floor">
                <div class="upload-wrapper">
                    <P class="title">请拍摄并上传本人手持身份证正面照片</P>
                    <div class="photo-wrapper" :class="postData.authentic_image?'no':''">
                        <div v-if="postData.authentic_image">
                            <img class="img" :src="postData.authentic_image" alt="">
                            <img @click="postData.authentic_image = ''" class="close-btn"
                                src="__CDN__/assets/img/close.png" alt="">
                        </div>
                        <label v-else for="upload">
                            <input ref="anchorUpload" id="upload" type="file" accept="image/*" @change="uploadPicture">
                            <img class="img" src="__CDN__/assets/img/identity@2x.png" alt="">
                        </label>

                    </div>
                </div>
            </div>
            <div class="section-floor">
                <div class="form-panel">
                    <div class="input-wrapper">
                        <div class="label">手机号</div>
                        <input class="input" v-model="postData.mobile" type="text" placeholder="请输入您的手机号">
                    </div>
                    <div class="input-wrapper">
                        <div class="label">验证码</div>
                        <input class="input" type="number" v-model="postData.code" placeholder="请输入您的手机号">
                        <div v-if="timeCount==60" class="code-btn" @click="send">获取验证码</div>
                        <div v-else class="code-btn disabled">{{timeCount}}</div>
                    </div>
                    <div class="btn-wrapper">
                        <div v-if="postData.code.length && postData.mobile.length" class="btn" @click="submit">提交
                        </div>
                        <div v-else class="btn disabled">提交</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__CDN__/assets/js/exif.js"></script>
<script src="__CDN__/assets/js/base64image.js"></script>
<script>
    let index = new Vue({
        el: '#app',
        data: {
            lowsum: 0,
            list: [],
            postData: {
                mobile: '',
                authentic_image: '',
                code: ''
            },
            timeCount: 60
        },
        created() {
            // this.jumpDomain = "{:url('index/detail')}"
        },
        mounted() {
            // this.ajax()
            // this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        },
        methods: {
            send() {
                console.log(axios)
                let self = this
                let mobile = Number(self.postData.mobile)
                let timer = setInterval(() => {
                    self.timeCount--
                    if (self.timeCount == 0) {
                        self.timeCount = 60
                        clearInterval(timer)
                    }
                }, 1000)
                axios({
                    method: "get",
                    url: "/api/sms/send",
                    params: {
                        mobile: mobile,
                        event: "tixian"
                    },
                    headers: {
                        "content-type": "application/json; charset=utf-8"
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        self.$messagebox(res.data.msg)
                    }
                })

            },
            loadMore() {},
            submit() {
                let self = this
                axios({
                    method: "post",
                    url: "{:url('user/authentic')}",
                    data: self.postData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        self.$messagebox({
                            title: res.data.msg
                        }).then(rest => {
                            if (rest === 'confirm') {
                                javascript: history.go(-1);
                            }
                        })
                    }
                })
            },
            uploadPicture() {
                let self = this
                    base64Image({
                        width: 750,                             /*【选填】宽度默认750，如果图片尺寸大于该宽度，图片将被设置为该宽度*/
                        ratio: 0.75,                            /*【选填】压缩率默认0.75 */
                        file: self.$refs.anchorUpload,                               /*【必填】对应的上传元素 */
                        callback: function (imageUrl) {         /*【必填】处理成功后的回调函数 */
                            /*imageUrl为得到的图片base64数据，这里可以进行上传到服务器或者其他逻辑操作 */
                            self.axiosPictrue(imageUrl)
                        },
                    });
            },
            axiosPictrue(base64String){
                let self = this
                let formdata = new FormData()
                formdata.append('file', base64String)
                axios({
                    method: "post",
                    url: "/api/common/uploadBase64",
                    data: formdata,
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        self.postData.authentic_image = res.data.data.url
                    } else {
                        alert("上传失败");
                    }
                })
            }
        }
    })
</script>